<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<script>
	$(document).ready(function() {
		//sheet 초기화  
		createIBSheet2(document.getElementById("viewArea"),"mySheet","100%","150px");
		
		var cfg = {SearchMode:smLazyLoad,Page:30,FrozenCol:3};
		
		var headers = [ {Text:"상태|삭제|주민번호|관계|성명|생일|직업|학력", Align:"Center"} ];
		var info = {Sort:1,ColMove:1,ColResize:1,HeaderCheck:0};
		var cols = [
			{Type:"Status", Width:60, Align:"Center",SaveName:"sStatus"},
			{Type:"DelCheck", Width:60},
			{Type:"Text", Width:150, Align:"Center",SaveName:"id",Format:"IdNo"},
			{Type:"Combo", Width:80,SaveName:"relation", ComboText:"조부|조모|부|모|배우자|아들|딸|손자|손녀", ComboCode:"01|02|03|04|05|06|07|08|09"},
			{Type:"Text", Width:110, Align:"Center",SaveName:"name"},
			{Type:"Date", Width:100, Align:"Center",SaveName:"birthday",Format:"Ymd"},
			{Type:"Text", Width:90,SaveName:"job"},
			{Type:"Combo", Width:100,SaveName:"school", ComboText:"대학원졸|대졸|초대졸|고졸|중졸|국졸|그외", ComboCode:"1|2|3|4|5|6|7"}
		];
		
		mySheet.SetConfig(cfg);
		mySheet.InitHeaders(headers,info);
		mySheet.InitColumns(cols);

		mySheet.FitColWidth();
		
		createIBSheet2(document.getElementById("viewArea2"),"mySheet2","100%","150px");
		
		var cfg = {SearchMode:smLazyLoad,Page:30,FrozenCol:3};
		
		var headers = [ {Text:"상태|종목명|구분|체결일|체결\n조건|수량|가격|협상대상|협상여부|최대\n참여|현재참여|협상\n참여", Align:"Center"} ];
		var info = {Sort:1,ColMove:1,ColResize:1,HeaderCheck:0};
		var cols = [
		    {Type:"Status",Width:65,SaveName:"sStatus2",Align:"Center"},
		    {Type:"Text",Width:65,SaveName:"param2",Align:"Center"},
		    {Type:"Combo",Width:55,SaveName:"param3",ComboText:"매도|매수",ComboCode:"00|01"},
			{Type:"Combo",Width:55,SaveName:"param4",ComboText:"당일|익일|특정일|특정일까지",ComboCode:"00|01|02|03"},
			{Type:"Text",Width:55,SaveName:"param5"},
			{Type:"AutoSum",Width:80,SaveName:"param6",Format:"Integer"},
			{Type:"Text",Width:55,SaveName:"param7"},
			{Type:"Combo",Width:70,SaveName:"param8",ComboText:"수량|가격|가격,수량",ComboCode:"00|01|02"},
			{Type:"Combo",Width:70,SaveName:"param9",ComboText:"미협상|협상중|협상완료",ComboCode:"00|01|02"},
			{Type:"Text",Width:40,SaveName:"param10"},
			{Type:"CheckBox",Width:80,SaveName:"param11",Align:"Center"},
			{Type:"Text",Width:60,SaveName:"param12",Align:"Center"}
		];
		
		mySheet2.SetConfig(cfg);
		mySheet2.InitHeaders(headers,info);
		mySheet2.InitColumns(cols);

		mySheet2.FitColWidth();
	});
	
	/*Sheet 각종 처리*/
	function doAction(sAction) {
		
		switch(sAction) {
			case "search":		//조회
				/* 대기 이미지를 띄우지 않는다. DoSearch로 조회 할 경우에는 조회조건을 서버에서 받아 처리 하는 동안에도 대기 이미지를 띄우지만(비동기방식)
				   GetSearchData + LoadSearchData 조합으로 조회 할 경우 데이터를 받아서 시트에 넣는 순간에 대기 이미지가 뜬다(LoadSearchData 시점,동기방식)
				      그러므로 서버에서 처리 시간 지연으로 인하여 조회 데이터를 받지 못 할 경우 대기 이미지가 띄지 않아 사용자는 조회가 되고 있는지 알 수 없으므로 LoadSearchData시점에 대기 이미지가 뜰지
				      않도록 설정 하고 따로 대기 이미지를 뛰워준다.jquery를 이용하여 대기 이미지를 띄웠음.jquery에서 제공하는 div를 띄울 수 없을 경우 GetSearchData 대신에 ajax로 조회 처리한다.
				*/
				$.blockUI({
					message : '<h1>Processing.....</h1>',
					//GetSearchData가 동기방식이기 때문에 blockUI의 콜백에서 조회를 한다.
					onBlock: function(){
						//시트조회는 비동기 이기 때문에 대기 이미지의 콜백에서 조회 처리를 해야 함
						mySheet.SetWaitImageVisible(0);
						mySheet2.SetWaitImageVisible(0);
						
						//조회를 할 기준 시트를 선택 한다. 둘중에 아무 시트나 상관 없음.조회 조건이 있으면 두번째 인자에 조건을 넘기면 된다.
						//IBSheetInfo.js의 FormQueryString 함수가 Form오브젝트 안에 있는 컨트롤을 QueryString으로 구성하는 함수이다. 
						//예) var str = mySheet.GetSearchData("../data/multisave_data.xml","test=1&test2=2");
						var str = mySheet.GetSearchData("../data/multisave_data.jsp");
						
						var datastr = str.split("@!@");
						//받은 데이터를 각각에 시트에 넣어준다
						mySheet.LoadSearchData(datastr[0]);
						mySheet2.LoadSearchData(datastr[1]);
					}
				});
				
				
				break;
			
		}
	}
	
	 

	function mySheet_OnSearchEnd(Code, Msg, StCode, StMsg) {
		//mySheet.FitColWidth();
	}
	
	function mySheet2_OnSearchEnd(Code, Msg, StCode, StMsg) {
		// GetSearchData + LoadSearchData 조회는 동기 조회이므로 jquery로 띄운 대기 이미지를 LoadSearchData의 callback 함수인 OnSearchEnd 이벤트에서 닫아줘야 한다.
		//mySheet2.FitColWidth();
		$.unblockUI({
			//블럭이 닫히면
			onUnblock:function(){
				//code가 양수이면 정상 처리
				if(Code >= 0){
					alert("조회가 완료 되었습니다.");
					mySheet2.FitColWidth();
				}
				
			}
			
		});
	}
	
</script>
<title>여러개 시트 동시 조회 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/sheetNavi.jsp" %>	
	<div id="title">여러개 시트 동시 조회 예제</div>
	<div id="desc">
		GetSearchData()메서드를 통해 여러시트에 들어갈 데이터를 한꺼번에 가져와 분배하여 LoadSearchData()로 시트에 로드하는 예제
	</div>

	<div id="functionArea">
		<div>
		var str = mySheet.GetSearchData("../data/multisave_data.xml");<br>
		<br>
		// "@!@" 구분자로 구분<br>
		var datastr = str.split("@!@");<br>
		<br>
		// 불러온 데이터를 읽어드린다.<br>
		mySheet.LoadSearchData(datastr[0]);<br>
		mySheet2.LoadSearchData(datastr[1]);<br>
		</div>
		<br>
		<div>
			<span>
			<input type="button" value="조회" onclick="doAction('search')">
			</span>
		</div>
	</div>
	
	<div id="viewArea">
	</div>
	<div id="viewArea2">
	</div>
</div>
</body>
</html>